<template>
	<view class="content">
		<view class="top-bar" >
			<view class="status_bar">
				<!-- 占位 -->
			</view>
			<view class="top-bar-left" @tap="goBack()">
				<image src="../../static/chat/left.png" ></image>
			</view>
			<view class="top-bar-center">
				小明
			</view>
		</view>
		<scroll-view  class="chat" 
		scroll-y="true" 
		scroll-with-animation="true" 
		scroll-into-view="">
			<view class="chat-main">
				<view class="chat-ls" v-for="(item,index) in msgs" :key="index" >
					<view class="chat-time" v-if="item.time != ''">{{changeTime(item.time)}}</view>
					<view class="msg-m msg-left" v-if="item.id !='b'">
						<image :src="item.imgurl" class="user-img"></image>
						<view class="message">
							<view class="msg-text">{{item.message}}</view>
						</view>
					</view>
					<view class="msg-m msg-right" v-if="item.id =='b'">
						<image :src="item.imgurl" class="user-img"></image>
						<view class="message">
							<view class="msg-text">{{item.message}}</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="submit">
			<view class="submit-text">
				<textarea auto-height="true" class="submit-send"></textarea>
				<view class="submit-btn">
					发送
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import dataTest from '../dataTest.js';
	import myfunc from '../myFunc.js';
	// import submit from '@/pages/chat/submit.vue';
	export default {
		data() {
			return {
				msgs:[],
				oldTime:new Date(),
				scrollTo:'',
			}
		},
		onLoad:function() {
			this.getMsg();
		},
		methods: {
			//更改时间
			changeTime:function(date){
				return myfunc.dataTime(date)
			},
			goBack(){
				uni.navigateBack({
					delta:1
				});
			},
			//获取聊天数据
			getMsg:function(){
				let msg = dataTest.message();
				for(let i = 0;i < msg.length;i++){
					//补充图片地址
					msg[i].imgurl = '../../static/chat/'+msg[i].imgurl;
					//时间间隔
					let t = myfunc.spaceTime(this.oldTime,msg[i].time);
					if(t){
						this.oldTime = t;
					}
					msg[i].time = t
					this.msgs.unshift(msg[i]);
				}
				console.log('拿到数据了',this.msgs)
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	// *{
	// 	padding: 0;
	// 	margin:0;
	// }
	page {
		height: 100%;
	}
	.content{
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: rgb(244, 244, 244);
		.submit{
			// border: 1px solid black;
			background-color:rgb(244, 244, 244);
			width: 100%;
			position: fixed;
			bottom: 0;
			.submit-text{
				width: 100%;
				padding: 20rpx 20rpx;
				display: flex;
				justify-content: space-around;
				// align-items: baseline;
				align-items: center;
			}
			.submit-send{
				line-height: 44rpx;
				background-color: white;
				// position: fixed;
				// bottom: 15px;
			}
			.submit-btn{
				// position: absolute;
				// right: 0;
				// padding: 5rpx;
				box-sizing: border-box;
				margin-right: 20rpx;
				border-radius: 5px;
				background-color: #00a8cc;
				// border: 1px solid black;
				height: 47rpx;
				width: 75rpx;
				text-align: center;
			}
		}
	}
	.top-bar{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 88rpx;
		background: #00a8cc;
		// border: 1px solid black;
		.status_bar{
			height: var(--status-bar-height);
			width: 100%;
		}
		.top-bar-left{
			// border: 1px solid black;
			float: left;
			image{
				width: 55rpx;
				height: 55rpx;
				margin-top: 6px;
				margin-left: 5px;
				// border: 1px solid black;
			}
		}
		.top-bar-center{
			font-size: 18px;
			color: white;
			display: flex;
			justify-content: center;
			margin-top: 8px;
			// border: 1px solid black;
		}
	}
	.chat{
		height: 87%;
		// height: 100%;
		.chat-main{
			padding-left: 32rpx;
			padding-right: 32rpx;
			// padding-top: 100rpx;
			padding-top: 5px;
			// padding-bottom: 120rpx;
			display: flex;
			flex-direction:column;
		}
		.chat-ls{
			
			
			.chat-time{
				font-size:24rpx;
				font-family: PingFangSC-Regular,PingFang SC;
				font-weight: 400;
				color: rgba(39, 40, 50, 0.3);
				padding: 20rpx ;
				text-align: center;
			}
			.msg-m{
				display: flex;
				padding: 20rpx 0;
				.user-img{
					// flex: auto;
					width: 90rpx;
					height: 90rpx;
					border-radius: 20px;
				}
				.message{
					max-width: 480rpx; //设置最大宽度
				}
				.msg-text{
					font-size: 32rpx;
					font-weight: 400;
					color: black;
					line-height: 44rpx;
					padding: 18rpx 24rpx;
				}
			}
			.msg-left{
				flex-direction: row;
				.msg-text{
					background-color: white;
					border-radius: 0px 20px 20px 20px;
					margin-left: 16rpx;
				}
			}
			.msg-right{
				flex-direction: row-reverse;
				.msg-text{
					background-color: rgba(0, 168, 204, 0.8);
					border-radius: 20px 0px 20px 20px;
					margin-left: 16rpx;
				}
			}
		}
		
	}
</style>
